{% layout none %}
{% assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros: gift_card.currency %}
{% assign formatted_initial_value_stripped = formatted_initial_value | strip_html %}
<!doctype html/>
<html class="no-js" lang="{{ shop.locale }}">

<head>
  <!-- Basic page needs ================================================== -->
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

  {% if settings.favicon %}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
  {% endif %}

  <!-- Title and description ================================================== -->
  <title>{{ 'gift_cards.issued.title_html' | t: value: formatted_initial_value_stripped, shop: shop.name }}</title>
  <meta name="description" content="{{ 'gift_cards.issued.subtext' | t }}"/>

  <!-- Helpers ================================================== -->
  <link rel="canonical" href="{{ canonical_url }}"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <meta name="format-detection" content="telephone=no"/>

  <!-- CSS ================================================== -->
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
  {{ 'modernizr.gift-card.js' | shopify_asset_url | script_tag }}

  {{ content_for_header }}
</head>
<body>
<header class="site-header" role="banner">
    <div class="grid grid--no-gutter grid--table site-header__inner">
      <div class="grid__item">
        <div class="site-header__logo h1" itemscope itemtype="http://schema.org/Organization">
          <a href="{{ shop.url }}" class="site-header__link site-header__logo-link" itemprop="url">{{ shop.name }}</a>
        </div>
      </div>
    </div>
  </header>

  <div class="giftcard-wrapper">

    <div class="shop-url">{{ shop.url | escape }}</div>

    <main class="giftcard" role="main">
      <div class="giftcard__header text-center">
        <h1>{{ 'gift_cards.issued.subtext' | t }}</h1>
        {% unless gift_card.enabled %}
          <p class="giftcard__tag">{{ 'gift_cards.issued.disabled' | t }}</p>
        {% endunless %}
        {% assign gift_card_expiry_date = gift_card.expires_on | date: format: 'basic' %}
        {% if gift_card.expired and gift_card.enabled %}
           <p class="giftcard__tag">{{ 'gift_cards.issued.expired' | t: expiry: gift_card_expiry_date }}</p>
        {% endif %}
        {% if gift_card.expired != true and gift_card.expires_on and gift_card.enabled %}
          <p class="giftcard__tag giftcard__tag--active">{{ 'gift_cards.issued.active' | t: expiry: gift_card_expiry_date }}</p>
        {% endif %}
      </div>

      <div class="giftcard__wrap">
        <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card illustration"/>

        {% assign initial_value_size = formatted_initial_value | size %}
        <div class="h1 giftcard__amount{% if initial_value_size > 6 %} giftcard__amount--medium{% endif %}">
          {% if gift_card.balance != gift_card.initial_value %}
            <span class="giftcard__tooltip">
              <span class="giftcard__tooltip-label">{{ 'gift_cards.issued.remaining_html' | t: balance: gift_card.balance | money }}</span>
            </span>
          {% endif %}
          <strong>{{ formatted_initial_value }}</strong>
        </div>

        {% assign code_size = gift_card.code | format_code | size %}
        <div class="giftcard__code{% if code_size <= 25 %} giftcard__code--large{% elsif code_size > 25 and code_size <= 30 %} giftcard__code--medium{% else %} giftcard__code--small{% endif %}" onclick="selectText('GiftCardDigits');">
          <div class="giftcard__code__inner">
            <strong class="giftcard__code__text {% if gift_card.expired or gift_card.enabled != true %} disabled{% endif %}" id="GiftCardDigits">{{ gift_card.code | format_code }}</strong>
          </div>
        </div>
      </div>

      <p class="text-center">
        {{ 'gift_cards.issued.redeem_html' | t: value: formatted_initial_value_stripped }}
      </p>

      <div id="QrCode" class="giftcard__qr-code" data-identifier="{{ gift_card.qr_identifier }}"></div>

      <div class="text-center">
        <p>
          <a href="{{ shop.url }}" class="btn" target="_blank">{{ 'gift_cards.issued.shop_link' | t }}</a>
        </p>
        <p>
          <button type="button" class="text-link print-link" onclick="window.print();">
            {{ 'gift_cards.issued.print' | t }}
          </button>
        </p>
        {% if gift_card.pass_url %}
          <p>
            <a class="giftcard__apple-wallet" href="{{ gift_card.pass_url }}">
              <img class="giftcard__apple-wallet-image" src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="{{ 'gift_cards.issued.add_to_apple_wallet' | t }}"/>
            </a>
          </p>
        {% endif %}
      </div>
    </main>

  </div>

  {{ 'vendor/qrcode.js' | shopify_asset_url | script_tag }}

<script type="text/javascript">
    new QRCode(document.getElementById('QrCode'), {
      text: "{{ gift_card.qr_identifier }}",
      width: 120,
      height: 120
    });

    /*============================================================================
      Auto-select gift card code on click, based on ID passed to the function
    ==============================================================================*/
    function selectText(element) {
      var doc = document,
          text = doc.getElementById(element);

      if (doc.body.createTextRange) { // ms method
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) { // moz, opera, webkit method
        var selection = window.getSelection(),
            range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  </script>

</body>

</html>
